<template>
  <div class="toThemsBox">
    <!-- 顶部tab切换盒子 -->
    <div>
      <div>
        <div class="toThemsTop">
          <!-- 周一至周日 -->
          <div class="toThemsTopTab">
            <span
              v-for="(item, index) in toThemsData"
              :key="item.date_ts"
              @click="tabBtn(index)"
              :class="tabIndex == index ? 'active' : ''"
              >{{ item.day_of_week }}</span
            >
          </div>
          <div class="toThemsTopImgs">
            <!-- 无更新番剧时显示 -->
            <div v-if="erji.length <= 0">
              <div class="wu">当天没有更新的番剧</div>
            </div>
            <!-- 有更新番剧时 -->
            <div v-if="erji.length > 0">
              <div
                v-for="item in erji"
                :key="item.episode_id"
                @click="btnUrl(item.season_id)"
              >
                <img :src="item.square_cover" alt="" />
                <p class="toThemsTopTitle1">{{ item.title }}</p>
                <p class="toThemsTopTitle2">{{ item.pub_index }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 索引数据 -->
    <div>
      <div>
        <div class="indexes">
          <li>
            <!-- //pages/Even/even -->
            <span>索引</span>
            <!-- <navigator url="../pages/Even/even" hover-class="navigator-hover" > -->
            <span @click="lookAll()">查看更多></span>

            <!-- </navigator> -->
          </li>
          <div class="classifyBox">
            <span
              v-for="item in IndexesDate"
              :key="item.item_id"
              @click="lookAll()"
              >{{ item.title }}</span
            >
          </div>
        </div>
      </div>
    </div>
    <!-- 番剧推荐 -->
    <div>
      <div>
        <div class="DramaSeries">
          <li>番剧推荐</li>
          <!-- 渲染数据 -->
          <div>
            <div
              v-for="item in DramaSeries"
              :key="item.season_id"
              class="DramaSeriesItem"
            >
              <!-- 图片 -->
              <div class="DramaSeriesItemImgS" @click="btnUrl(item.season_id)">
                <img :src="item.cover" alt="" />
                <!-- 独家 -->
                <span
                  class="badge"
                  :style="{ background: `${item.badge_info.bg_color}` }"
                >
                  {{ item.badge_info.text }}</span
                >
                <!-- 追番量 -->
                <span class="follow_view">{{ item.stat.follow_view }}</span>
              </div>
              <p>{{ item.title }}</p>
              <p class="desc">{{ item.desc }}</p>
            </div>
          </div>
          <!-- 换一换  分页 -->
          <div class="pageBox" @click="btnPageDramaSeries()">
            <i class="iconfont icon-shuaxin"></i>换一换
          </div>
        </div>
      </div>
    </div>
    <!-- 国创推荐 -->
    <div>
      <div>
        <div class="Aimtron">
          <li>国创推荐</li>
          <!-- 渲染数据 -->
          <div>
            <div
              v-for="item in Aimtron"
              :key="item.season_id"
              class="AimtronItem"
            >
              <!-- 图片 -->
              <div class="DramaSeriesItemImgS" @click="btnUrl(item.season_id)">
                <img :src="item.cover" alt="" />
                <!-- 独家 -->
                <span
                  class="badge"
                  :style="{ background: `${item.badge_info.bg_color}` }"
                >
                  {{ item.badge_info.text }}</span
                >
                <!-- 追番量 -->
                <span class="follow_view">{{ item.stat.follow_view }}</span>
              </div>
              <p>{{ item.title }}</p>
              <p class="desc">{{ item.desc }}</p>
            </div>
          </div>
          <!-- 换一换  分页 -->
          <div class="pageBox" @click="btnPageAimtron()">
            <i class="iconfont icon-shuaxin"></i>换一换
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTothem, getIndexes } from "../services/index";
import "../static/font_refresh/iconfont.css";
export default {
  data() {
    return {
      //追番数据列表
      toThemsData: [],
      list: [],
      erji: [],
      tabIndex: 3,
      //索引数据
      IndexesDate: [],
      //番剧推荐数据
      DramaSeries: [],
      //番剧推荐长度
      DramaSeriesLen: 0,
      //番剧推荐分页起始码
      DramaSeriesPage: 1,
      //国创推荐数据
      Aimtron: [],
      //国创推荐分页起始码
      AimtronPage: 1,
      //番剧推荐长度
      AimtronLen: 0,
      //结束码
      endPage: 3,
    };
  },
  created() {
    //每日追番
    this.getTothems();
    //索引
    this.getIndexess();
  },
  mounted() {},
  async onShow() {},
  methods: {
    //查看更多
    lookAll() {
      uni.navigateTo({
        url: "/pages/Even/even",
      });
    },
    //视频详情
    btnUrl(id) {
      //https://api.bilibili.com/pgc/view/wx/season?season_id=38260&ep_id=
      console.log(111);
      //跳转详情播放
      uni.navigateTo({
        url: `/pages/Detail_Vido/index`,
      });
    },
    /// 番剧推荐 分页 换一换
    btnPageDramaSeries() {
      let total = this.DramaSeriesLen / this.endPage;
      if (total > this.DramaSeriesPage) {
        this.DramaSeriesPage++;
        this.getIndexess();
      } else {
        this.DramaSeriesPage = 1;
        this.getIndexess();
      }
    },
    /// 国创推荐 分页 换一换
    btnPageAimtron() {
      let total = this.AimtronLen / this.endPage;
      if (total > this.AimtronPage) {
        this.AimtronPage++;
        this.getIndexess();
      } else {
        this.AimtronPage = 1;
        this.getIndexess();
      }
    },
    //
    ///获取数据 //每日追番  //day_of_week
    async getTothems() {
      let result = await getTothem();
      if (result.code == 0) {
        this.toThemsData = result.result;
        //周一至周日
        this.list = result.result.map((item) => {
          if (item.day_of_week == 1) {
            return (item.day_of_week = "一");
          } else if (item.day_of_week == 2) {
            return (item.day_of_week = "二");
          } else if (item.day_of_week == 3) {
            return (item.day_of_week = "三");
          } else if (item.day_of_week == 4) {
            return (item.day_of_week = "四");
          } else if (item.day_of_week == 5) {
            return (item.day_of_week = "五");
          } else if (item.day_of_week == 6) {
            return (item.day_of_week = "六");
          } else if (item.day_of_week == 7) {
            return (item.day_of_week = "日");
          }
        });
        console.log("每日追番 ...", this.toThemsData);
        this.erji = result.result[3].episodes;
      }
    },
    //索引数据 //番剧推荐   //国创推荐
    async getIndexess() {
      let res = await getIndexes();
      if (res.code == 0) {
        //索引数据
        this.IndexesDate = res.result.modules[0].items;

        //番剧推荐
        this.DramaSeriesLen = res.result.modules[1].items.length; //番剧推荐长度
        this.DramaSeries = res.result.modules[1].items.slice(
          this.endPage * (this.DramaSeriesPage - 1),
          this.endPage * this.DramaSeriesPage
        );
        //国创推荐
        this.AimtronLen = res.result.modules[2].items.length; //国创推荐长度
        this.Aimtron = res.result.modules[2].items.slice(
          this.endPage * (this.AimtronPage - 1),
          this.endPage * this.AimtronPage
        );
      }
      console.log("番剧推荐...", this.DramaSeries);
    },
    //切换周几
    tabBtn(i) {
      this.tabIndex = i;
      this.erji = this.toThemsData[i].episodes;
    },
    //换一换

  },
};
</script>

<style lang="scss" scoped>
.toThemsBox {
  width: 100%;
  display: flex;
  flex-direction: column;

  > div {
    width: 100%;
    border-top: 2rpx solid #999;
    padding-top: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    > div {
      width: 90%;
      display: flex;
      flex-direction: column;
      //相同样式
      > div {
        width: 100%;
        padding: 20rpx 0;
        display: flex;
        flex-direction: column;
        //标题类型
        > li {
          width: 100%;
          height: 60rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        //换一换 分也
        > .pageBox {
          width: 100%;
          height: 90rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fd7aa6;
        }
      }
      //  //顶部tab盒子
      .toThemsTop {
        .toThemsTopTab {
          display: flex;
          align-items: center;
          justify-content: space-between;
          > span {
            padding: 8rpx 35rpx;
          }
          .active {
            background: #fd7aa6;
            border-radius: 30rpx;
            color: #fff;
          }
        }
        // 每日数据
        .toThemsTopImgs {
          margin-top: 20rpx;
          width: 100%;
          > div {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            > .wu {
              width: 100% !important;
              text-align: center;
              height: 135rpx;
              line-height: 135rpx;
              color: #999;
            }
            //每一项
            > div {
              width: 135rpx;
              margin: 16rpx;
              > img {
                width: 135rpx;
                height: 135rpx;
                border-radius: 10rpx;
              }
              .toThemsTopTitle1 {
                font-size: 24rpx;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .toThemsTopTitle2 {
                font-size: 20rpx;
              }
            }
          }
        }
      }

      //索引
      .indexes {
        .classifyBox {
          width: 100%;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          align-items: center;
          span {
            padding: 20rpx 70rpx;
            margin: 10rpx 0;
            background: #f5f5f5;
            font-size: 28rpx;
            border-radius: 8rpx;
          }
        }
      }
      //番剧推荐
      .DramaSeries,
      .Aimtron {
        > div {
          width: 100%;
          display: flex;
          // flex-wrap: wrap;
          .DramaSeriesItem,
          .AimtronItem {
            padding: 10rpx 15rpx;
            //图片 定位 独家 追番量
            > .DramaSeriesItemImgS {
              width: 200rpx;
              height: 300rpx;
              position: relative;
              img {
                width: 100%;
                height: 100%;
              }
              > span {
                font-size: 22rpx;
                color: #fff;
              }
              // 独家
              .badge {
                position: absolute;
                top: 6rpx;
                right: 8rpx;
                padding: 0 8rpx;
                border-radius: 8rpx;
              }
              //追番
              .follow_view {
                position: absolute;
                bottom: 6rpx;
                left: 5rpx;
                border-radius: 8rpx;
                background: rgba($color: #000000, $alpha: 0.4);
              }
            }
            //标题
            > p {
              font-size: 26rpx;
            }
            //更新
            .desc {
              font-size: 26rpx;
              color: #999;
            }
          }
        }
      }
    }
  }
}
</style>
